<!--员工  -->
<template>
  <div class="employees">
    <!-- 工具栏组件 -->
    <mytool :showLeft="false">
      <template #right>
        <!--  :disabled控制按钮根据权限决定是否禁用 -->
        <el-button type="primary" size="small" @click="$router.push('/employees/myimport')"
          :disabled="'employees-import' | btnright">导入</el-button>
        <el-button type="primary" size="small" @click="add_embtn"><i class="el-icon-plus"></i> 新增员工</el-button>
      </template>
    </mytool>
    <!-- 卡片 -->
    <el-card class="mycard">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column prop="username" label="姓名" sortable>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <!-- v-imgerror自定义指令  提供加载默认图片的办法 -->
            <img class="myimg" @click="openPre(scope.row.staffPhoto)" v-imgerror="defaultimg"
              :src="scope.row.staffPhoto" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" sortable>
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" sortable>
        </el-table-column>
        <el-table-column prop="formOfEmployment" label="聘用形式" sortable>
          <template slot-scope='scope'>
            {{ scope.row.formOfEmployment | trunfilter }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" sortable>
        </el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间" sortable>
        </el-table-column>
        <!-- <el-table-column prop="zip" label="是否在职" sortable>
        </el-table-column> -->
        <!-- <el-table-column prop="zip" label="状态" sortable>
        </el-table-column> -->
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDetail(scope.row)"
              :disabled="'employees-check' | btnright">查看</el-button>
            <el-button type="text" size="small" :disabled="'employees-trun' | btnright">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="openRole(scope.row)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pagesizes"
          :current-page="current" :page-size="page_size" layout="total, prev, pager, next, jumper, sizes"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 封装的新增组件存放处 -->
    <!-- .snyc 省略函数写法 -->
    <mypanel :dialogShow.sync="dialogShow" @updateData="updateData"></mypanel>
    <!-- 预览头像面板 -->
    <el-dialog title="预览图片" :visible.sync="previewShow">
      <div class="prebox">
        <canvas ref="myCanvas"></canvas>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配角色 -->
    <el-dialog title="分配角色" :visible.snyc="roleShow">
      <!-- 多选框组 -->
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="item.id" v-for="item in roleList" :key="item.id">
          {{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleShow = false">取 消</el-button>
        <el-button type="primary" @click="btn_rolesave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mytool from '@/components/mytool/index.vue'
import { getEmpListApi, updateEmpRoleApi } from '@/api/employees.js'
// 根据id获取当前角色信息
import { getBaseInfoApi } from '@/api/user.js'
// 导入获取角色列表接口信息
import { getRoleListApi } from '@/api/setting.js'
// 导入二维码包
import Qrcode from 'qrcode'
// 导入Excel插件相关
// 导入新增面板
import mypanel from './components/mypanel'
export default {
  components: {
    mytool,
    mypanel
  },
  methods: {
    // 修改员工角色信息
    async btn_rolesave () {
      const res = await updateEmpRoleApi({
        // 当前选中条目的id
        id: this.isid,
        // 当前选中条目id的角色权限
        roleIds: this.checkList
      })
      this.$message.success('权限修改完毕')
      this.roleShow = false
      this.getRoleList()
    },
    // 获取角色列表
    async getRoleList () {
      const res = await getRoleListApi({
        page: 1,
        page_size: 10
      })
      console.log(res)
      this.roleList = res.data.rows
    },
    // 权限：角色分配被点击
    async openRole (data) {
      this.isid = data.id
      this.roleShow = true
      const res = await getBaseInfoApi(data.id)
      console.log(res)
      this.checkList = res.data.roleIds
    },
    // 点击头像查看大图
    openPre (url) {
      this.previewShow = true
      console.log(url)
      this.myurl = url
      // 当用户打开dialog时，会去渲染异步结构
      // 当执行到此处时，结构还没渲染完，但是二维码已经获取到了，所以无法展示在页面上
      // 因此我们需要用nextTick函数来解决
      this.$nextTick(() => { Qrcode.toCanvas(this.$refs.myCanvas, url, { width: 200, height: 200 }) })

    },
    // 查看按钮 携带参数 ?id
    toDetail (row) {
      this.$router.push(`/employees/mydetail?id=${row.id}`)
    },
    // 刷新表格
    updateData () {
      this.getEmpList()
    },
    // 获取基本信息
    async getEmpList () {
      console.log('------')
      // 获取员工列表 params方式
      const res = await getEmpListApi({
        page: this.current,
        size: this.page_size
      })
      console.log(res)
      // 保存列表数据源
      this.tableData = res.data.rows
      // 保存数据总数
      this.total = res.data.total
    },
    // 页容量改变时会触发 （页容量：每页数据条数）
    handleSizeChange (size) {
      // 用户手动选择页容量
      this.page_size = size
      this.getEmpList()
    },
    // 翻页（当前页改变时）时触发
    handleCurrentChange (page) {
      this.current = page,
        this.getEmpList()
    },
    //新增按钮
    add_embtn () {
      this.dialogShow = false
    }
  },
  data () {
    return {
      // dialog控制
      dialogShow: false,
      // 页容量集合 可选每页展示多少条数据 这个功能暂时没有启用
      pagesizes: [5, 10, 15, 20],
      //每页展示多少条数据 开发者自行选定
      page_size: 10,
      // 当前页为哪一页 接收后端数据要从第一页开始，具体运行后即为用户点击的结果
      current: 1,
      // 表格数据源 数组形式
      tableData: [],
      //总数据条数 初始值为 0
      total: 0,
      // 默认图片显示
      defaultimg: require('@/assets/common/head.jpg'),
      // 预览面板的控制
      previewShow: false,
      // 预览图片地址
      myurl: '',
      // 分配角色框
      roleShow: false,
      // 多选框数据  里面存放被选中的label
      checkList: [],
      // 保存所有角色列表
      roleList: [],
      // 当前操作的id
      isid: ''
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getEmpList()
    this.getRoleList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.employees {
  padding: 20px;

  .mycard {
    margin-top: 20px;

    .myimg {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  .imgsize {
    width: 150px;
    height: 150px;
  }

  .prebox {
    text-align: center;
  }

  .block {
    text-align: right;
    margin-top: 20px;
  }
}
</style>